<template>
  <div>
     <div class="config">
        <div class="back" onclick="window.history.go(-1)"><img src="../assets/images/back.png" alt=""></div>
        <p>消息列表</p>
    </div>

    <div class="box">
        <div v-for="item in data">
        <router-link to="/messageDetail" >
            <dl>
                <dd>
                    <div class="img">
                        <img src="../assets/images/touxiang1.png" alt="">
                    
                    </div>
                </dd>
                <dt>
                    <p>{{item.title}}</p>
                    <span>{{item.value}}</span>      
                    <i>{{item.create_time}}</i>
                </dt>
            </dl>
        </router-link>
        </div>

    </div>

   


  </div>
</template>

<script>
export default {
    name: "message",
    data() {
        return {
            data: {}
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#5aa0c8";
    },
    mounted() {
        var qs = require("qs");

        this.axios({
            method: "post",
            url: `${this.siteUrl}/getMessage`,
            data: qs.stringify({
                uid: localStorage.getItem("uid")
            })
        })
            .then(response => {
           
                if ((response.data.result == 200)) {
                    this.data = response.data.data;

                    for (var i in this.data) {
                        this.data[i].create_time = new Date(
                            this.data[i].create_time
                        ).toLocaleDateString();
                    }
                } else {
                    alert("请求失败");
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
    margin-top: 30px;
}
dl {
    width: 92vw;
    background: #fff;
    overflow: hidden;
    height: 70px;
    margin-top: 10px;
    margin-left: 3vw;
    border-radius: 5px;
    padding: 1vw;
}

dl dd {
    float: left;
    width: 18vw;
}

dl dd .img {
    width: 50px;
    height: 50px;
    margin: 5px;
    position: relative;
}
dl dd .img img:first-child {
    width: 50px;
    border-radius: 25px;
}

dl dt {
    float: left;
    width: 72vw;
    font-size: 14px;
    color: #adadad;
    height: 59px;
    position: relative;
}
dl dt p {
    margin-top: 10px;
    color: #333;
}
span {
    font-size: 12px;
}

i {
    position: absolute;
    right: 5px;
    top: 10px;
    font-style: normal;
    font-size: 12px;
}
</style>
